﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
  <script src="./vue.js"></script>
  <style>
    .header {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin: 20px 0px;
    }

    td {
      border: 1px solid #cccccc;
      padding: 10px 20px;
    }
  </style>
</head>

<body>
  <div class="container" id="root">
    <div class="header">
      <div>
        所选区域：{{title}}</div>
      <div>
        设备类型
        <select v-model="selectValue">
          <option :value="item.value" v-for="item in deviceTypeList" :key="item.value">{{item.label}}</option>
        </select>
      </div>
    </div>
    <div class="center" v-for="items in cycleObjArray" :key="items.name">
      <h5>设备名称: {{items.name}} </h5>
      <table cellpadding="0" cellspacing="0" style="border-collapse:collapse">
        <tr>
          <td>设备名称</td>
          <td>配置项</td>
          <td>当前值</td>
          <td>标准值</td>
          <td>OK/NOK</td>
        </tr>
        <tr v-for="(item,idx) in items.list" :key="idx">
          <td>{{item.name}}</td>
          <td>{{item.configItem}}</td>
          <td>{{item.curentValue}}</td>
          <td>{{item.standardValue}}</td>
          <td>{{item.isEqual}}</td>
        </tr>
      </table>
    </div>
  </div>
  <script>
    new Vue({
      el: "#root",
      data() {
        return {
          title: "RS111242", // 设备名称
          deviceTypeList: [
            {
              label: "CPU",
              value: "S71500"
            },
            {
              label: "CPU I/O模块",
              value: "sps"
            },
            {
              label: "交换机",
              value: "SCALANCE"
            },
            {
              label: "robot",
              value: "rb-"
            },
            {
              label: "ET200SP",
              value: "ET 200"
            },
            {
              label: "EBF",
              value: "KP8"
            },
            {
              label: "基恩士",
              value: "ls-"
            },
          ],
          selectValue: "",
          cycleObjArray: [],
          initObj: {},
          typeObj: {
            "S71500": [
              // RS121242|h101-002sps101-kf020|h101-002sps101-kf020 这些值会变
              {
                key: "FirmwareVersion",
                standardValue: "V1.00.03",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|FirmwareVersion",
              },
              {
                key: "Failsafe_FCapabilityActivated",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|Failsafe_FCapabilityActivated",
              },
              {
                key: "Failsafe_LowerBoundForFDestinationAddresses",
                standardValue: "1",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|Failsafe_LowerBoundForFDestinationAddresses",
              },
              {
                key: "Failsafe_UpperBoundForFDestinationAddresses",
                standardValue: "1022",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|Failsafe_UpperBoundForFDestinationAddresses",
              },

              {
                key: "Failsafe_CentralFSourceAddress",
                standardValue: "1",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|Failsafe_CentralFSourceAddress",
              },

              {
                key: "Failsafe_DefaultFmonitoringTimeCentral",
                standardValue: "600",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|Failsafe_DefaultFmonitoringTimeCentral",
              },

              {
                key: "IpProtocolSelection",
                standardValue: "1",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|X1|IpProtocolSelection",
              },

              {
                key: "Address",
                standardValue: "10.250.94.20",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|X1|Address",
              },

              {
                key: "SubnetMask",
                standardValue: "255.255.254.0",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|X1|SubnetMask",
              },

              {
                key: "UseRouter",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|X1|UseRouter",
              },

              {
                key: "RouterAddress",
                standardValue: "10.250.94.1",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|X1|RouterAddress",
              },

              {
                key: "PnDeviceNameSetDirectly",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|X1|PnDeviceNameSetDirectly",
              },

              {
                key: "PnDeviceNameAutoGeneration",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|X1|PnDeviceNameAutoGeneration",
              },

              {
                key: "TimeSynchronizationNtp",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|TimeSynchronizationNtp",
              },

              {
                key: "InterfaceOperatingMode",
                standardValue: "IoController",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|InterfaceOperatingMode",
              },

              {
                key: "IsIoController",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|IsIoController",
              },

              {
                key: "IsIoDevice",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|IsIoDevice",
              },

              {
                key: "DiagnosticsCommunicationError",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|DiagnosticsCommunicationError",
              },

              {
                key: "DeviceReplacementWithoutExchangeableMedium",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|DeviceReplacementWithoutExchangeableMedium",
              },

              {
                key: "OverwriteDeviceNames",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|OverwriteDeviceNames",
              },

              {
                key: "IECV22LLDPMode",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|IECV22LLDPMode",
              },

              {
                key: "KeepAlivesInterval",
                standardValue: "30",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|KeepAlivesInterval",
              },

              {
                key: "MediaRedundancyRole",
                standardValue: "NotInRing",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|MediaRedundancyRole",
              },

              {
                key: "PnSendClock",
                standardValue: "1000000",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|PnSendClock",
              },

              {
                key: "SyncRole",
                standardValue: "NotSynchronized",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|replaceSps|null|SyncRole",
              },

              {
                key: "AlternativePartnerPorts",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|Port_1|AlternativePartnerPorts",
              },

              {
                key: "TransmissionRateAndDuplex",
                standardValue: "Automatic",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|Port_1|TransmissionRateAndDuplex",
              },

              {
                key: "PortMonitoring",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|Port_1|PortMonitoring",
              },

              {
                key: "EndOfDetectionOfAccessibleDevices",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|Port_1|EndOfDetectionOfAccessibleDevices",
              },

              {
                key: "EndOfSyncDomain",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|replaceSps|Port_1|EndOfSyncDomain",
              },

              {
                key: "StartupActionAfterPowerOn",
                standardValue: "3",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|StartupActionAfterPowerOn",
              },

              {
                key: "StartupComparisonPresetToActualModule",
                standardValue: "2",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|StartupComparisonPresetToActualModule",
              },

              {
                key: "StartupConfigurationTimeout",
                standardValue: "60000",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|StartupConfigurationTimeout",
              },

              {
                key: "CycleMaximumCycleTime",
                standardValue: "150",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|CycleMaximumCycleTime",
              },

              {
                key: "CycleMinimumCycleTime",
                standardValue: "1",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|CycleMinimumCycleTime",
              },

              {
                key: "CycleEnableMinimumCycleTime",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|CycleEnableMinimumCycleTime",
              },

              {
                key: "CycleCommunicationLoad",
                standardValue: "20",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|CycleCommunicationLoad",
              },

              {
                key: "SystemMemoryByte",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|SystemMemoryByte",
              },

              {
                key: "SystemMemoryByteAddress",
                standardValue: "2",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|SystemMemoryByteAddress",
              },

              {
                key: "ClockMemoryByte",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|ClockMemoryByte",
              },

              {
                key: "ClockMemoryByteAddress",
                standardValue: "0",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|ClockMemoryByteAddress",
              },

              {
                key: "DiagnosticsAgingSimaticMemoryCard",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|Card reader/writer_1|DiagnosticsAgingSimaticMemoryCard",
              },

              {
                key: "NetworkFaultsAsMaintenance",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|NetworkFaultsAsMaintenance",
              },

              {
                key: "WebserverActivate",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|WebserverActivate",
              },

              {
                key: "WebserverAutomaticUpdate",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|WebserverAutomaticUpdate",
              },

              {
                key: "WebserverUpdateInterval",
                standardValue: "10",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|WebserverUpdateInterval",
              },

              {
                key: "DisplayTimeToStandbyMode",
                standardValue: "1800",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|CPU display_1|DisplayTimeToStandbyMode",
              },

              {
                key: "DisplayTimeToEnergySavingMode",
                standardValue: "900",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|CPU display_1|DisplayTimeToEnergySavingMode",
              },

              {
                key: "DisplayWriteAccess",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|CPU display_1|DisplayWriteAccess",
              },

              {
                key: "DisplayUpdateInterval",
                standardValue: "5",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|CPU display_1|DisplayUpdateInterval",
              },

              {
                key: "DisplayProtection",
                standardValue: "False",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|CPU display_1|DisplayProtection",
              },

              {
                key: "TimeOfDayLocalTimeZone",
                standardValue: "51",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|CPU display_1|TimeOfDayLocalTimeZone",
              },

              {
                key: "ProtectionEnablePutGetCommunication",
                standardValue: "True",
                url: "S71500/ET200MP station_1|Rail_0|replaceTitle|ProtectionEnablePutGetCommunication",
              },
            ],
            "sps": {},
            "SCALANCE": {},
            "rb-": {},
            "ET 200": {},
            "KP8": {},
            "ls-": [
              {
                key: "FirmwareVersion",
                standardValue: "V1.00.03",
                url: "lsName|机架|lsName|FirmwareVersion",
              },

              {
                key: "Address",
                standardValue: "10.250.94.109",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|IE1|Address",
              },

              {
                key: "IpProtocolSelection",
                standardValue: "Project",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|IE1|IpProtocolSelection",
              },

              {
                key: "SubnetMask",
                standardValue: "255.255.254.0",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|IE1|SubnetMask",
              },

              {
                key: "RouterAddress",
                standardValue: "10.250.94.1",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|IE1|RouterAddress",
              },

              {
                key: "SyncRouterSettingsWithIoController",
                standardValue: "True",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|IE1|SyncRouterSettingsWithIoController",
              },

              {
                key: "UseIpProtocol",
                standardValue: "True",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|IE1|UseIpProtocol",
              },

              {
                key: "UseIsoProtocol",
                standardValue: "False",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|IE1|UseIsoProtocol",
              },

              {
                key: "PnDeviceNameConverted",
                standardValue: "x-150ls-002-kf109.m104g124srs122",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|IE1|PnDeviceNameConverted",
              },

              {
                key: "PortActivation",
                standardValue: "True",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|Port 1|PortActivation",
              },

              {
                key: "TransmissionRateAndDuplex",
                standardValue: "Automatic",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|Port 1|TransmissionRateAndDuplex",
              },

              {
                key: "EndOfDetectionOfAccessibleDevices",
                standardValue: "False",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|Port 1|EndOfDetectionOfAccessibleDevices",
              },

              {
                key: "EndOfSyncDomain",
                standardValue: "False",
                url: "lsName|机架|lsName|55510 MVK PN FDI6/3 FDO2/1 DIO4 IOL2 IRT PP|Port 1|EndOfSyncDomain",
              },
            ],
          }
        }
      },
      watch: {
        selectValue(val) {
          this.cycleObjArray = []
          if (val) {
            const arrKeys = Object.keys(this.initObj)
            arrKeys.map(item => {
              if (item.includes(val)) {
                let initStringArray = JSON.stringify(this.typeObj[val]);
                if (val === 'S71500') {
                  let replaceSps = ""
                  let keys = Object.keys(this.initObj[item]["Rail_0"][this.title]);
                  keys.map(key => {
                    if (key.includes('sps')) {
                      replaceSps = key
                    }
                  })
                  initStringArray = initStringArray.replace(/replaceTitle/g, this.title);
                  initStringArray = initStringArray.replace(/replaceSps/g, replaceSps);
                } else if (val === 'ls-') {
                  initStringArray = initStringArray.replace(/lsName/g, item);
                }
                let initObjArray = JSON.parse(initStringArray)
                this.dataIntegration(item, initObjArray, this.initObj[item])
              }
            })
          }
        }
      },
      async mounted() {
        await this.initXmlDataFn()
      },
      methods: {
        async initXmlDataFn() {
          if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
          }
          else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          // 文件路径
          xmlhttp.open("GET", "Hardwarenew.xml", false);
          xmlhttp.send();
          xmlDoc = xmlhttp.responseXML;
          var xmlNodes = xmlDoc.getElementsByTagName("Device");
          // 将 xml 中标签有 Name 属性的数据存储到对象中
          await this.transformData(xmlNodes, this.initObj);
        },
        transformData(nodes, obj) {
          if (typeof nodes === 'string') return;
          if (nodes.length > 0) {
            for (let i = 0; i < nodes.length; i++) {
              let name = nodes[i].getAttribute('Name');
              let childrens = nodes[i].children;
              let innerHtml = nodes[i].innerHTML === " " ? nodes[i].innerHTML = "" : nodes[i].innerHTML
              if (childrens.length > 0) {
                this.$set(obj, name, {})
                this.transformData(childrens, obj[name]);
              } else {
                this.$set(obj, name, nodes[i].innerHTML)
              }
            }
          }
        },
        // 将数据整合成渲染需要的数据
        dataIntegration(deviceName, array, deviceObj) {
          const obj = {}
          obj.name = deviceName;
          obj.list = [];
          for (let i = 0; i < array.length; i++) {
            const item = array[i];
            let num = 0;
            item.url = item.url.split('|').splice(1);
            // 获取每个 配置项 的值
            let value = this.getParamsValue(item.url, deviceObj)
            obj.list.push({
              name: deviceName,
              configItem: item.key,
              curentValue: value,
              standardValue: item.standardValue,
              isEqual: value === item.standardValue ? true : false
            })
          }
          this.cycleObjArray.push(obj);
        },
        getParamsValue(array, obj) {
          let tempObj = obj;
          let i = 0;
          for (let len = array.length; i < len - 1; ++i) {
            let key = array[i];
            if (key in tempObj) {
              tempObj = tempObj[key];
            }
          }
          return tempObj[array[i]]
        },
      }
    })
  </script>
</body>

</html>